{extend name="app/admin/view/base.html"/}
{block name="resources"}
<style>
	.layui-card-body{width: 100%; box-sizing: border-box; display: flex;flex-wrap: wrap;}
	.ns-member {width: 33.3%; height: 180px; margin-right: 1.5%; margin-bottom: 20px; box-sizing: border-box; border: 1px solid #E5E5E5; text-align: center;}
	.ns-member-num{color: red; font-size: 30px; height: 50px; line-height: 50px; margin-top: 45px;}
	.ns-member-title{color: #666666; font-size: 16px;}

		.num {
        font-size: 20px;
        font-weight: 500;
        color: #252631;
    }
	.newBoxB {
	    width: 22%;
		height: 85px;
		margin-right: 20px;
		/* text-align: center; */
		display: flex;
		align-items: center;
		padding: 20px;
		border-radius: 2px;
	    display: flex;
	    background-color: #f5f5f5;
	    margin-top: 10px;
	}
	.newBoxB img {
	    margin-right: 20px;
	    width: 60px;
	    height: 60px;
	}
	.newBoxB .title {
	    font-size: 12px;
	    color: #aab8c8;
	}
</style>
{/block}
{block name="main"}
<div class="layui-collapse ns-tips">
	<div class="layui-colla-item">
		<h2 class="layui-colla-title">操作提示</h2>
		<ul class="layui-colla-content layui-show">
			<li>点击查看按钮可以查看分销商信息、订单信息、账户明细。</li>
<!--			<li>点击冻结按钮可以取消其分销商资格</li>-->
		</ul>
	</div>
</div>

<div class="ns-screen layui-collapse" lay-filter="selection_panel">
	<div class="layui-colla-item">
		<h2 class="layui-colla-title">筛选</h2>
		<form class="layui-colla-content layui-form layui-show">
			<div class="layui-form-item">

				<div class="layui-inline">
					<label class="layui-form-label">分销商名称：</label>
					<div class="layui-input-inline">
						<input type="text" id="fenxiao_name" name="fenxiao_name" placeholder="请输入分销商名" class="layui-input">
					</div>
				</div>
				
				<div class="layui-inline">
					<label class="layui-form-label">上级分销商：</label>
					<div class="layui-input-inline">
						<input type="text" name="parent_name" placeholder="请输入上级分销商" class="layui-input">
					</div>
				</div>

				<div class="layui-inline">
					<label class="layui-form-label">手机号：</label>
					<div class="layui-input-inline">
						<input type="text"  name="mobile" placeholder="请输入手机号" class="layui-input">
					</div>
				</div>
				<!--<div class="layui-inline">
					<label class="layui-form-label">分销等级：</label>
					<div class="layui-input-inline">
						<select name="level_id" lay-filter="level_id">
							<option value="">全部</option>
							{volist name="$level_list" id="level"}
							<option value="{$level.level_id}">{$level.level_name}</option>
							{/volist}
						</select>
					</div>
				</div>-->
			</div>

			<div class="layui-form-item">
				<!--<div class="layui-inline">
					<label class="layui-form-label">分销商状态：</label>
					<div class="layui-input-inline">
						<select name="status" lay-filter="status">
							<option value="">全部</option>
							<option value="1">正常</option>
							<option value="-1">已冻结</option>
						</select>
					</div>
				</div>-->
				
				<div class="layui-inline">
					<label class="layui-form-label">添加时间：</label>
					<div class="layui-input-inline">
					    <input type="text" class="layui-input" name="start_time"  id="start_time" autocomplete="off" placeholder="开始时间" >
						<i class="ns-calendar"></i>
					</div>
					<div class="layui-form-mid">-</div>
					<div class="layui-input-inline">
					    <input type="text" class="layui-input" name="end_time" id="end_time" autocomplete="off" placeholder="结束时间" >
						<i class="ns-calendar"></i>
					</div>
				</div>
			</div>
			
			<div class="ns-form-row">
				<button class="layui-btn ns-bg-color" lay-submit lay-filter="search">筛选</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</form>
	</div>
</div>

<div class="layui-card ns-card-common ns-card-brief">
	<div class="layui-card-header">
		<span class="ns-card-title">分销商概览</span>
	</div>
	<div class="layui-card-body">
	    <div class="newBoxB">
		    <img src="ADMIN_IMG/stat/group_1.png" alt="">
			<div>
			    <div class="num">{$fenxiao_num}</div>
				<div class="title">分销商（人）</div>
			</div>
		</div>
		 <div class="newBoxB">
		    <img src="ADMIN_IMG/stat/group_5.png" alt="">
			<div>
			    <div class="num">{$total_recommend_people}</div>
				<div class="title">推广人数</div>
			</div>
		</div>
		 <div class="newBoxB">
		    <img src="ADMIN_IMG/stat/group_2.png" alt="">
			<div>
			    <div class="num">{$total_recommend_order_count}</div>
				<div class="title">推广订单数</div>
			</div>
		</div>
		 <div class="newBoxB">
		    <img src="ADMIN_IMG/stat/group_6.png" alt="">
			<div>
			    <div class="num">{$total_recommend_order_commission}</div>
				<div class="title">推广订单金额</div>
			</div>
		</div>
		 <div class="newBoxB">
		    <img src="ADMIN_IMG/stat/group_7.png" alt="">
			<div>
			    <div class="num">{$balance_withdraw}</div>
				<div class="title">已提现金额</div>
			</div>
		</div>
		 <div class="newBoxB">
		    <img src="ADMIN_IMG/stat/group_3.png" alt="">
			<div>
			    <div class="num">{$balance_money}</div>
				<div class="title">未提现金额</div>
			</div>
		</div>
	</div>
</div>
<!--<div class="ns-single-filter-box">
	<button class="layui-btn ns-bg-color" onclick="clickAdd()">添加分销商</button>
</div>-->

<table id="fenxiao_list" lay-filter="fenxiao_list"></table>

<!-- 用户信息 -->
<script type="text/html" id="account">
	<!--<div class="layui-elip">当前佣金：{{d.account}}</div>
	<div class="layui-elip">已提现佣金：{{d.account_withdraw}}</div>-->
	<div class="layui-elip">当前佣金：{{d.balance_money}}</div>
	<div class="layui-elip">已提现佣金：{{d.balance_withdraw}}</div>
</script>

<!-- 用户信息 -->
<script type="text/html" id="userdetail">
	<div class='ns-table-tuwen-box'>
		<div class='ns-img-box'>
			{{# if (d.headimg != ""){ }}
			<img layer-src src="{{ns.img(d.headimg)}}">
			{{# } else { }}
			<img layer-src src="{:img($default_img.default_headimg)}">
			{{# } }}
		</div>
	</div>
</script>

<!-- 状态 -->
<script type="text/html" id="status">
	{{# if(d.status == 1){ }}
	<span style="color: green;">正常</span>
	{{# }else if(d.status == -1){ }}
	<span style="color: gray;">冻结</span>
	{{# } }}
</script>

<script type="text/html" id="member_info">
	<div class="layui-elip">昵称：{{d.nickname}}</div>
	<div class="layui-elip">电话：{{d.mobile}}</div>
</script>

<!-- 工具栏操作 -->
<script type="text/html" id="action">
	<div class="ns-table-btn">
		<a class="layui-btn" lay-event="detail">查看</a>
		{{# if(d.status == 1){ }}
<!--		<a class="layui-btn" lay-event="frozen">冻结</a>-->
		<a class="layui-btn" lay-event="change">上级分销商变更</a>
		{{# } }}
		<!--{{# if(d.status == -1){ }}
		<a class="layui-btn" lay-event="unfrozen">恢复正常</a>
		{{# } }}-->
	</div>
</script>
{/block}

{block name="script"}
<script>
	layui.use(['form', 'laydate'], function() {
		var table,
			form = layui.form,
			laydate = layui.laydate;
		form.render();

		//渲染时间
		laydate.render({
			elem: '#start_time',
			type: 'datetime'
		});

		laydate.render({
			elem: '#end_time',
			type: 'datetime'
		});

		table = new Table({
			elem: '#fenxiao_list',
			url: ns.url("fenxiao://admin/fenxiao/lists"),
			cols: [
				[/*{
					field: 'fenxiao_name',
					title: '分销商名称',
					unresize: 'false',
				},*/
				{
					field: 'userdetail',
					title: '头像',
					width: '10%',
					unresize: 'false',
					templet: '#userdetail'
				},
				{
					field: 'member_info',
					title: '用户信息',
					unresize: 'false',
					templet: '#member_info',
				},{
					field: 'one_child_num',
					title: '推广用户数量',
					unresize: 'false',
				},{
					field: 'hotel_fenxiao_order_money',
					title: '推广订单金额',
					unresize: 'false',
				},{
					field: 'one_fenxiao_order_money',
					title: '佣金金额',
					unresize: 'false',
				},
				{
					field: 'balance_withdraw',
					title: '已提现金额',
					unresize: 'false',
				},
				{
					field: 'withdraw_count',
					title: '提现次数',
					unresize: 'false',
				},/*{
					field: 'parent_name',
					title: '上级分销商',
					unresize: 'false',
                    templet: function(data) {
					    if(data.parent_name){
                            return data.parent_name;
						}else{
					        return '无';
						}
                    }
				}, {
					title: '佣金账户',
					width:'15%',
					unresize: 'false',
                    templet: '#account'
				}, {
					title: '团队人数',
					unresize: 'false',
                    templet: function(data){
					    if({$basics_info.level} == 1 || {$basics_info.level} == 0){
							return 0;
						}else if({$basics_info.level} == 2){
                            return data.one_child_fenxiao_num;
						}else{
                            return parseInt(data.one_child_fenxiao_num) + parseInt(data.two_child_fenxiao_num);
                        }
					}
				}, {
                    field: 'status',
                    title: '当前状态',
                    templet: '#status',
                    unresize: 'false'
                }, {
					field: 'create_time',
					title: '添加时间',
					unresize: 'false',
					templet: function(data) {
						return ns.time_to_date(data.create_time);
					}
				}, */{
					title: '操作',
					width:'15%',
					toolbar: '#action',
					unresize: 'false'
				}]
			]
		});
		
		/**
		 * 搜索功能
		 */
		form.on('submit(search)', function(data) {
			table.reload({
				page: {
					curr: 1
				},
				where: data.field
			});
			return false;
		});
		
		/**
		 * 监听工具栏操作
		 */
		table.tool(function(obj) {
			var data = obj.data,
					event = obj.event;
			switch (event) {
				case 'detail': //查看
					location.href = ns.url('fenxiao://admin/fenxiao/detail', {'fenxiao_id': data.fenxiao_id});
					break;
				case 'frozen': //冻结
					layer.confirm('确定要冻结该账户吗?', function () {
						if (repeat_flag) return;
						repeat_flag = true;

						$.ajax({
							url: ns.url("fenxiao://admin/fenxiao/frozen"),
							data: {fenxiao_id:data.fenxiao_id},
							dataType: 'JSON',
							type: 'POST',
							success: function(res) {
								layer.msg(res.message);
								repeat_flag = false;
								if (res.code == 0) {
									table.reload();
								}
							}
						});
					});
					break;
                case 'unfrozen': //解冻
                    layer.confirm('该账户确定要恢复正常吗?', function () {
                        if (repeat_flag) return;
                        repeat_flag = true;

                        $.ajax({
                            url: ns.url("fenxiao://admin/fenxiao/unfrozen"),
                            data: {fenxiao_id:data.fenxiao_id},
                            dataType: 'JSON',
                            type: 'POST',
                            success: function(res) {
                                layer.msg(res.message);
                                repeat_flag = false;
                                if (res.code == 0) {
                                    table.reload();
                                }
                            }
                        });
                    });
                    break;
                case 'change'://变更上级分销商
                    var url = ns.url("fenxiao://admin/fenxiao/change", {member_id: data.member_id});
                    //iframe层-父子操作
                    var layerIndex = layer.open({
                        title: "变更上级分销商",
                        type: 2,
                        area: ['1200px', '800px'],
                        // btn: '保存',
                        content: url,
                        end: function () {
                            location.reload();
                        }
                    });
                    break;
			}

		});
	});
	function clickAdd()
	{
		location.href = ns.url('fenxiao://admin/fenxiao/add');
	}
</script>
{/block}